<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<title>星语乐章</title>
		<link href="/user/css/bootstrap.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="/user/css/index.css" />
		<link rel="stylesheet" type="text/css" href="/user/css/rank.css" />
		<link rel="stylesheet" type="text/css" href="/user/css/sleep.css"/>
		<script src="/user/js/jquery.js"></script>
		<script src="/user/js/Popper.js"></script>
		<script src="/user/js/bootstrap.min.js"></script>
		<script src="/user/js/index.js" type="text/javascript"></script>
		
		<style type="text/css">
			
			/* 浮动*/
			.ad3 {
				position: absolute;
				/* 把浮动框置于顶层 */
				/* .*/
				right: 0px;
		
				top: 126px;
			}
		
			.ad3 a {
				color: black;
				position: absolute;
				padding: 0px 6px;
				/* background-color: #DFDFDF; */
				margin-right: 20px;
				margin-top: -20px;
				margin-left: 127px;
				background-color: rgba(223, 223, 223, 0.5);
			}
		</style>
	</head>
	<body>
		<div class="container">
			<!-- 导航栏 -->
			<nav class="navbar navbar-expand-md navbar-light slep">
				<div id="span1">
					<img class="rounded-circle" src="/img/logoindex.jpg">
					<span>星语乐章</span>
				</div>
				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNav">
					<span class="navbar-toggler-icon">

					</span>
				</button>
				<div class="collapse navbar-collapse" id="myNav">
					<ul class="navbar-nav" style="list-style: none;">
						<li class="nav-item active">
							<a class="nav-link" href="/user/userIndex">首页</a>
						</li>
						<li class="nav-item dropdown">
							<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="home_page.html">排行榜</a>
							<div class="dropdown-menu" style="background-color: #454D55;">
								<a class="dropdown-item" href="javascript:void(0)" onclick="soaring(1,20)">飙升榜</a>
								<a class="dropdown-item" href="javascript:void(0)" onclick="hot(1,20)">热歌榜</a>
							</div>
						</li>
						<li class="nav-item ">
							<a class="nav-link" th:if="${session.user!=null}" href="javascript:void(0)" onclick="myLove(1,20)">我的收藏</a>
						</li>
						<li class="nav-item " th:if="${session.user==null}">
							<a class="nav-link" href="userLoginIndex">登录</a>
						</li>
						<li class="nav-item ">
							<a class="nav-link" th:if="${session.user!=null}" href="javascript:void(0)" onclick="logOut()">登出</a>
						</li>
						<li class="nav-item " th:if="${session.user!=null}">
							<a class="nav-link" href="userMessages" th:text="${session.user.getUserName()}" style="color: red!important;"></a>
						</li>

					</ul>
					<!-- 搜索框-->
					<div class="input-group col-md-4" style="position: absolute; right: 0px;">
						<input type="text" class="form-control" placeholder="请输入歌名" id="songLikeSearch" />
						<span class="input-group-btn">
							<button class="btn btn-info btn-search" onclick="userSearchSong()">搜索</button>
						</span>
					</div>
				</div>
			</nav>
			<div id="box">
				<!-- 轮播图-->
				<div id="demo" class="carousel slide" data-ride="carousel">

					<!-- 指示符 -->
					<ul class="carousel-indicators">
						<li data-target="#demo" data-slide-to="0" class="active"></li>
						<li data-target="#demo" data-slide-to="1"></li>
						<li data-target="#demo" data-slide-to="2"></li>
					</ul>

					<!-- 轮播图片 -->
					<div class="carousel-inner">
						<div class="carousel-item active">
							<img src="/img/background1.jpg">
						</div>
						<div class="carousel-item">
							<img src="/img/background2.jpg">
						</div>
						<div class="carousel-item">
							<img src="/img/background3.jpg">
						</div>
					</div>

					<!-- 左右切换按钮 -->
					<a class="carousel-control-prev" href="#demo" data-slide="prev">
						<img src="/user/img/left.jpeg" style="width: 50px; height: 50px;">
					</a>
					<a class="carousel-control-next" href="#demo" data-slide="next">
						<img src="/user/img/right.jpeg" style="width: 50px; height: 50px;">
					</a>
				</div>

				<!-- 热门推荐 -->
				<div class="row" style="margin: 0 auto; margin-top: 15px;">
					<div class="col-9">
						<div class="v-hd2">
							<a href="#" class="tit f-ff2 f-tdn" id="recommend_title">热门推荐</a>
							<div class="tab">
								<a href="javascript:void(0)" onclick="chinese(1,20)" class="s-fc3">华语</a>
								<span class="line">|</span>
								<a href="javascript:void(0)" onclick="fashion(1,20)" class="s-fc3">流行</a>
								<span class="line">|</span>
								<a href="javascript:void(0)" onclick="rock(1,20)" class="s-fc3">摇滚</a>
								<span class="line">|</span>
								<a href="javascript:void(0)" onclick="ballad(1,20)" class="s-fc3">民谣</a>
								<span class="line">|</span>
								<a href="javascript:void(0)" onclick="electronic(1,20)" class="s-fc3">电子</a>
							</div>
						</div>
						<!-- 第一行推荐 -->
						<div class="row r2" style="margin-top: 45px;">
							<div class="col-3">
								<img src="/user/img/c1%20(1).jpeg">
								<div class="img-content" style="position: relative; text-align: center;">
									<ul>
										<a href="javascript:void(0)" onclick="grainInEar(1,20)">芒种推荐❤</a>
									</ul>
								</div>
							</div>
							<div class="col-3">
								<img src="/user/img/c1%20(2).jpeg">
								<div class="img-content" style="position: relative; text-align: center;">
									<ul>
										<a href="javascript:void(0)" onclick="firstFrost(1,20)">霜降必听</a>
									</ul>
								</div>
							</div>
							<div class="col-3">
								<img src="/user/img/c1%20(3).jpeg">
								<div class="img-content" style="position: relative; text-align: center;">
									<ul>
										<a href="javascript:void(0)" onclick="grainRain(1,20)">谷雨专享</a>
									</ul>
								</div>
							</div>
							<div class="col-3">
								<img src="/user/img/c1%20(4).jpeg">
								<div class="img-content" style="position: relative; text-align: center;">
									<ul>
										<a href="javascript:void(0)" onclick="minorShow(1,20)">小雪最佳</a>
									</ul>
								</div>
							</div>
						</div>
						<!-- 第二行推荐 -->
						<div class="row r2" style="margin-top: 45px;">
							<div class="col-3">
								<img src="/user/img/c1%20(5).jpeg">
								<div class="img-content" style="position: relative; text-align: center;">
									<ul>
										<a href="javascript:void(0)" onclick="winterSolstice(1,20)">冬至推送</a>
									</ul>
								</div>
							</div>
							<div class="col-3">
								<img src="/user/img/c1%20(6).jpeg">
								<div class="img-content" style="position: relative; text-align: center;">
									<ul>
										<a href="javascript:void(0)" onclick="majorHeat(1,20)">大暑必备</a>
									</ul>
								</div>
							</div>
							<div class="col-3">
								<img src="/user/img/c1%20(7).jpeg">
								<div class="img-content" style="position: relative; text-align: center;">
									<ul>
										<a href="javascript:void(0)" onclick="summerSolstice(1,20)">夏至专用</a>
									</ul>
								</div>
							</div>
							<div class="col-3">
								<img src="/user/img/c1%20(8).jpeg">
								<div class="img-content" style="position: relative; text-align: center;">
									<ul>
										<a href="javascript:void(0)" onclick="beginningSpring(1,20)">立春推荐</a>
									</ul>
								</div>
							</div>
						</div>
					</div>
					<!--入住歌手-->
					<div class="col-3" style="position: relative;">
						<div class="n-singer" style="border-bottom: 2px solid #004085;">
							<a href="#" class="singer">入驻歌手</a>
							</a>
						</div>
						<ul class="singers">
							<li th:each="m:${list}">
								<a href="https://baike.baidu.com/item/" th:href="'https://baike.baidu.com/item/'+${m.singerName}">
									<img th:src="${m.headerImg}">
									<div class="" style="float: right;">
										<div class="singerr">
											<span th:text="${m.singerName}"></span>
											<p th:text="${m.singerDescribe}"></p>
										</div>
									</div>
								</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<!-- 底部 -->
			<div class="footer" style="text-align: center;">
				<div style="margin: 5px auto; ">
					<ul class="nav justify-content-center">
						<li class="nav-item">
							<a href="/aboutUs" class="nav-link">关于我们</a>
						</li>
						<li class="nav-item">
							<a href="#" class="nav-link">手机版</a>
						</li>
						<li class="nav-item">
							<a href="#" class="nav-link">开放平台</a>
						</li>
						<li class="nav-item">
							<a href="#" class="nav-link">自助广告</a>
						</li>
						<li class="nav-item">
							<a href="/recruit" class="nav-link">招聘</a>
						</li>
						<li class="nav-item">
							<a href="/customer" class="nav-link">客服</a>
						</li>
						<li class="nav-item">
							<a href="#" class="nav-link">帮助</a>
						</li>
					</ul>
				</div>
				<div id="">
					<p>@星语乐章&nbsp; [2022]168号 &nbsp; 粤ICP证2021021号 &nbsp; 未成年人家长监护</p>
				</div>
				<th:block th:if="${session.user!=null}">
					<input type="hidden" th:value="${session.user.id}" id="userId">
				</th:block>
			</div>
		</div>
	</body>
	<script src="/router/user/rankingList.js"></script>
	<script src="/router/user/type.js"></script>
	<script src="/router/user/recommend.js"></script>
	<script src="/router/logOut.js"></script>
	<script th:inline="javascript">
		console.log([[${list}]])
	</script>
</html>
